<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./player.css" />
  </head>
  <body>
    <div id="app">
      <div class="app-palyer">
        <!-- 头部 名字+搜索框 -->
        <div class="app-player-searchBar">
          <div class="title">呵呵呵的音乐盒</div>
          <!-- 搜索框  绑定键盘事件，按下enter键触发  同时用v-modle绑定keywords值-->
          <input type="text"  @keyup.enter="handleSearch" v-model="keywords"/>
        </div>
        <!-- 中间内容 -->
        <div class="app-player-content">
          <!-- 左边歌曲信息 -->
          <div class="app-player-content-left">
            <!-- 歌曲列表 -->
            <div class="app-player-songs-list">
              <!-- 每一项歌曲数据  用v-for="(item,index) in songs" 循环拿到每一项数据:key="item.id"都有一个唯一的id，绑定id-->
              <div class="app-player-songs-list-item" v-for="(item,index) in songs" :key="item.id">
                <!-- 音频按钮     绑定播放音频事件@click.stop加上.stop修饰符是为了避免事件冒泡，传一个id-->
                <div class="player-audio" @click.stop="playSongs(item.id)"></div>
                <!-- 歌曲名 动态绑定title=item.name-->
                <div class="player-name" :title="item.name">
                  {{item.name}}
                </div>
                <!--MV按钮  动态绑定class。当mvid存在时，说明有MV，就渲染；mvid不存在就不渲染MV按钮-->
                <!--绑定播放MV事件@click.stop加上.stop修饰符是为了避免事件冒泡，传一个mvid  -->
                <div :class="[{'player-mv':item.mvid!=0}]" @click.stop="playMV(item.mvid)"></div>
              </div>
            </div>
          </div>
          <!-- 中间的中间部分：音频播放时的动画效果和歌曲封面图 -->
          <div class="app-player-content-middle">
            <!-- 柄  动态添加一个class，当isAudioPlaying=true时，有动画(['静态className',{动态className}])-->
            <img src="./imgs/player_bar.png" alt="" :class="['player-bar',{playing:isAudioPlaying}]"/>
            <!-- 歌曲封面图 动态绑定src，若该音乐没有封面图，就用默认图片-->
            <img :src="imgUrl===''?'./imgs/cover.jpg':imgUrl" alt="" class="cover" />
            <!-- CD 动态添加一个class，当isAudioPlaying=true时，有动画(['静态className',{动态className}])-->
            <img src="./imgs/disc.png" alt="" :class="['disc',{autorotate:isAudioPlaying}]" />
          </div>
          <!-- 中间的右边部分：热门评论 -->
          <div class="app-player-content-right">
            <h5 class="comment-title">热门评论</h5>
            <div class="comment-list">
              <!-- 每一项热门评论 用v-for="(item,index) in hotComments" 循环拿到每一项数据:key="item.CommentId"都有一个唯一的id，绑定id-->
              <div class="comment-list-item" v-for="(item,index) in hotComments" :key="item.CommentId">
                <!-- 用户头像 -->
                <div class="imageWrapper">
                  <!-- 动态绑定 用户头像:src="item.user.avatarUrl" -->
                  <img :src="item.user.avatarUrl" alt="头像"/>
                </div>
                <!-- 内容：用户昵称、评论内容 -->
                <div class="comment-content">
                  <!-- 用户昵称 动态绑定 -->
                  <div class="nickName">{{item.user.nickname}}</div>
                  <!-- 评论内容 动态绑定-->
                  <div class="content">
                    {{item.content}}
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <!-- 底部：音频播放、视频播放 -->
        <div class="app-player-footer">
          <!-- 音频播放 动态绑定音频的url播放资源-->
          <!-- 绑定一个原生的停止音频播放的事件@pause -->
          <audio
            @pause="handleAudioPause"
            ref="audio"
            :src="songUrl" 
            controls="controls"
            autoplay="autoplay"
            loop="loop"
            
          ></audio>
          <!-- MV播放 -->
          <!-- 有一个class名为hidden，效果是hidden；
            动态添加一个class，当isVideoPlaying为false没有播放MV时，添加hidden这个class，实现隐藏效果；
            若isVideoPlaying为true表示正在播放MV，那么就让videoBox显示出来 
            当点击了MV按钮时，就播放，isVideoPlaying为true
          -->
          <div class="video-box" :class="{hidden:!isVideoPlaying}">
            <!-- MV关闭按钮 绑定关闭MV事件-->
            <div class="vedio-close" @click.stop="closeMV">X</div>
            <!-- MV播放区 动态绑定src mvURL-->
            <!-- ref可以获取到实例DOM结构，用来关闭MV功能的实现 -->
            <video
              ref="vedio"
              :src="mvUrl"
              controls="controls"
              autoplay="autoplay"
              loop="loop"
            ></video>
            <!-- MV遮罩背景区 -->
            <div class="video-mask"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./node_modules/axios/dist/axios.js"></script>
  <script src="./js/myaxios.js"></script>
  <script src="./js/style.js"></script>
 
</html>
